<template>
  <div id="area">


  </div>
</template>

<script>
import { mineinfo } from "@/api/system/introduce";
import { wgs84tobd09 } from "@/utils/bub";
export default {
  data() {
    return {
      Map: null
    }
  },
  mounted() {

    this.mineinfos();
  },
  methods: {
    mineinfos() {
      mineinfo({}).then(res => {
        if (res.code == 200) {
          this.popMap(res.rows[0]);
        }
        
      })
    },
    popMap(v) {
      this.Map = new BMap.Map("area", { mapType: BMAP_SATELLITE_MAP }); // 创建Map实例
      this.Map.centerAndZoom(
        new BMap.Point(114.6147429352289,24.130142523152553),
        16
      ); // 初始化地图,设置中心点坐标和地图级别
      this.Map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      let listDate = v.mineBorder.split(';');
      this.Map.addEventListener("click", (e) => {  
      console.log(e.point.lng+ "," + e.point.lat);
    });
      if (listDate != undefined) {
        let points = [];
        //坐标转换完之后的回调函数
        for (let i = 0; i < listDate.length; i++) {
          let arr = [];
          arr = listDate[i].split(",");

          points.push(new BMap.Point(arr[0], arr[1]));
        }

        let pushlist = [];
        points.map((item) => {
          pushlist.push(wgs84tobd09(item.lng, item.lat));
        });

        let pointList = [];
        for (let j = 0; j < pushlist.length; j++) {
          pointList.push(new BMap.Point(pushlist[j][0], pushlist[j][1]));
        }

        var opts = {
          width: 50,
          height: 200,
          title: "拐点",
        };

        pointList.forEach((element, index) => {
          let imgIcon =
            "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/pointimg.png";

          let icons = new BMap.Icon(imgIcon, new BMap.Size(30, 30));
          icons.setImageSize(new BMap.Size(30, 30));
          // let icons =
          var marker = new BMap.Marker(element, {
            title: `拐点${index + 1}`,
            icon: icons,
          });
          let label = new BMap.Label(
            `<div style="font-size:25px;">${index + 1}</div>`,
            {
              offset: new BMap.Size(-10, -10),
            }
          );
          label.setStyle({
            width: "40px",
            height: "40px",
            borderRadius: "50%",
            lineHeight: "40px",
            textAlign: "center",
            border: 'none',
            color: '#333',
            backgroundColor: '#f4ea2a'
          });
          marker.setLabel(label);
          marker.disableMassClear();
          this.Map.addOverlay(marker);
          marker.addEventListener("click", attrinute);
          let that = this;
          function attrinute(e) {
            console.log(e);
            var infoWindow = new BMap.InfoWindow(
              `<h4>拐点坐标${[index + 1]}</h4><br><br><h3>经度(x):${e.target.point.lng
              }</h3>,<br><h3>纬度(y):${e.target.point.lat}</h3>`,
            );
            that.Map.openInfoWindow(infoWindow, e.point);
          }
        });

        var plyy = new BMap.Polygon(pointList, {
          strokeWeight: 4,
          strokeColor: "#FFF836",
          fillColor: "",
          title: "拐点", 
        });
        plyy.disableMassClear();
        this.Map.addOverlay(plyy);
        this.Map.setCenter(114.6147429352289,24.130142523152553);
      

      }

    },
  }

}
</script>

<style lang="scss" scoped>
#area {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 1 !important;
}
#main-footer{
  display: none;
}
</style>  